<template>
    <el-tabs class="remote-info-tabs" type="border-card" @tab-change="onTabChange">
        <el-tab-pane class="remote-tab-summary">
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <TrendCharts />
                    </el-icon>
                    <span>摘要</span>
                </span>
            </template>
            <RemoteSummary ref="remote_summary" @update-ssh-status="onUpdateSshStatus" />
        </el-tab-pane>
        <el-tab-pane class="remote-tab-monitor">
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <Odometer />
                    </el-icon>
                    <span>监控</span>
                </span>
            </template>
            <RemoteMonitor ref="remote_monitor" @cmdstart="onCmdStart" />
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
import RemoteSummary from './RemoteTabs/RemoteSummary.vue';
import RemoteMonitor from './RemoteTabs/RemoteMonitor.vue';
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['UpdateSshStatus']);
defineExpose({ setRemote });

async function setRemote(remote) {
    proxy.$refs.remote_summary.setRemote(remote);
    proxy.$refs.remote_monitor.setRemote(remote);
}

async function onTabChange(name) {
    // console.log(`onTabChange name = ${name}`);
    if (name == 1) {
        await nextTick();
        proxy.$refs.remote_monitor.fit();
    }
}

function onCmdStart(cmd) {
    // console.log('onCmdStart cmd = ', cmd);
    proxy.$refs.remote_summary.setCmdStart(cmd);
}

function onUpdateSshStatus(remoteId) {
    emit('UpdateSshStatus', remoteId);
}

onMounted(() => { });
</script>

<style scoped>
.remote-info-tabs {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.remote-info-tabs :deep(.el-tabs__content) {
    padding: 5px 5px 10px 5px;
    height: calc(100% - 39px);
    box-sizing: border-box;
}

.remote-info-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
}

.remote-info-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
}

.remote-tab-summary {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.remote-tab-monitor {
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
}
</style>
